// webpack 默认打包出来的文件
(() => {
    var __webpack_modules__ = ({
        "./src/title.js":
            ((module) => {
                module.exports = "title"
            })
    });
    var __webpack_module_cache__ = {};

    function __webpack_require__(moduleId) {
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
            return cachedModule.exports;
        }
        var module = __webpack_module_cache__[moduleId] = {
            exports: {}
        };
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
        return module.exports;
    }

    var __webpack_exports__ = {};
    (() => {
        let title = __webpack_require__("./src/title.js")
        console.log("title", title);
    })();
})()
;

// 自己实现的 webpack 打包的结果

/**
 * @author: Gene
 * @age: 永远18岁的美少年
 * @Email： yangjianyun@58.com
 * @date: 2021-11-18 20:28:22
 * @description: webpack 打包,同步加载的实现原理
 *      实际上, webpack 打包后, 不管是什么模块,打包后的文件, 全是 COMMONJS
 *      不管是什么模块规范,  最后全变成 COMMONJS
 *      所以说在浏览器里面只需要模拟 commonjs 就可以
 */

;(() => {
    var modules = {
        // 模块的 key 是模块的 ID, 不管是什么模块, 它的模块 ID 都是相对于项目根目录的相对路径
        // 其实它是一个 commonjs 的文件,  在webpack 打包之后  =>>都是 common.js
        // module 代表当前模块,  exports = module.exports 代表当前模块的导出对象 require 加载别的模块的方法
        "./src/title.js": (module, exports, require) => {
            module.exports = 'title';
        }
    }
    // 如果模块加载过了, 就不需要再加载了
    var cache = {}

    function require(moduleId) {
        // 如果缓存中有次模块对应的模块数据,直接返回
        if (cache[moduleId]) {
            return cache[moduleId].exports
        }
        var module = cache[moduleId] = {
            exports: {}
        }
        // 执行模块定义的方法, 给导出对象赋值
        modules[moduleId](module, module.exports, require); // 递归
        // 返回导出对象
        return module.exports;
    }

    let title = require("./src/title.js")
    console.log(title);
})()